<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0"/>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>{$dishes_data.category}-{$dishes_data.name}</title>
</head>
<body>
<div id="details">
    <!--菜品信息--开始-->
    <!--<div class="goodsTitle">
        <span class="back"></span>
        碳烤水果
    </div>-->
    <div class="goodshHead">
        <img class="goodsBg" src="__PUBLIC__/{$dishes_data.image}"/>
        <img class="goodsIcon" src="__PUBLIC__/{$dishes_data.image}"/>
        <span class="goodsPrice">￥<i class="price">{$dishes_data.price}</i></span>
    </div>
    <div class="goodsCon">
        <span class="goodsClass">{$dishes_data.category}</span>
        <span class="goodsName">{$dishes_data.name}</span>
        <span class="goodsEenergy">{$dishes_data.description}</span>
        <span class="goodsDes">{$dishes_data.food_material}</span>
    </div>
    <!--菜品信息--结束-->

    <!--菜品统计信息--开始-->
    <div class="goodsSales">
        <div class="sale">
            <span class="num">{$count_data.month_sale}</span>
            月销
        </div>
        <div class="acclaim">
            <span class="num">{$count_data.haoping_rate}%</span>
            好评
        </div>
        <div class="agio">
            <span class="num">{$count_data.discount}%</span>
            折扣
        </div>
    </div>
    <!--菜品统计信息--结束-->

    <!--评论信息--开始-->
    <div class="evaluate">
        <span class="evalClass">商品评价</span>
        <div class="all starCon">
            <for start="1" end="$count_data.avg_comment_level" comparison="elt">
                <i class="star_on"></i>
            </for>
            <for start="1" end="$count_data.completion_level" comparison="elt">
                <i class="star"></i>
            </for>
        </div>
        <div class="evalCon">
            <span class="evalTitle">{$count_data.comment_proportion}%人评价这款商品</span>
            <div class="evalUsercon">
                <foreach name="comment_user_headimgurl" item="v">
                    <a href="javascript:void(0);" class="userList">
                        <img src="{$v['headimgurl']}"/>
                    </a>
                </foreach>
            </div>
            <div class="userNum">
                +{$count_data.total}
            </div>

            <!--评论列表--开始-->
            <div class="evalList">
                <foreach name="comment_list" item="vo">
                    <div class="list">
                        <div class="starCon">
                            <for start="1" end="$vo['comment_level']" comparison="elt">
                                <i class="star_on"></i>
                            </for>
                            <for start="1" end="$vo['completion_level']" comparison="elt">
                                <i class="star"></i>
                            </for>
                        </div>
                        <div class="userName">
                            {$vo['username']}
                        </div>
                        <div class="listContent">
                            <p class="content">{$vo['content']}</p>
                        </div>
                    </div>
                </foreach>
            </div>
            <!--评论列表--结束-->
        </div>
    </div>
    <!--评论信息-结束-->
</div>
<!--添加菜品到购物车遮罩层--开始-->
<div class="mask"></div>
<div id="addC">
    <img class="addCar" src="__PUBLIC__/images/btn_add@1x.png"/>
    <div class="flavor">
        <div class="flavorClass">选择你的喜好</div>
        <!--<img class="flavImg" src="__PUBLIC__/images/image1@1x.png"/>-->
        <img class="flavImg" src="__PUBLIC__/{$dishes_data.image}"/>
        <!--选择菜品属性--开始-->
        <ul class="flavList">
            <!--<li class="list">-->
                <!--<span class="listcheck check" data="0"></span>-->
                <!--<span class="name">偏重辣</span>-->
            <!--</li>-->
            <!--<li class="list">-->
                <!--<span class="listcheck check" data="0"></span>-->
                <!--<span class="name">偏重辣</span>-->
            <!--</li>-->
            <!--<li class="list">-->
                <!--<span class="listcheck check_on" data="1"></span>-->
                <!--<span class="name name_on">偏重辣</span>-->
            <!--</li>-->
            <foreach name="dishes_attributes_info" item="vo">
                <li class="list">
                    <span class="listcheck check" data="0"></span>
                    <span style="display: none;">{$vo.id}</span>
                    <span class="name">{$vo.attribute_value_name}</span>
                    <span style="display: none;">{$vo.attribute_value_price}</span>
                </li>
            </foreach>
        </ul>
         <!--选择菜品属性--结束-->
        <div class="btncon">
            <button class="goCar" onclick="addCar()">加入购物车</button>
        </div>
    </div>
</div>
<!--添加菜品到购物车遮罩层--结束-->
<script type="text/javascript">
    //弹出口味
    $('.addCar').on('click', function () {
        $(this).hide(100)
        $('#addC').animate({
            height: "8.233rem"
        }, 200)
        $('html,body').css('overflow', 'hidden')
        $('.mask').animate({
            height: "100%",
        }, 200).show()
    })

    $('.mask').on('click', function () {
        $('.addCar').show()
        $('#addC').animate({
            height: "0"
        }, 200)
        $('html,body').css('overflow', 'auto')
        $(this).animate({
            height: "0",
        }, 200).hide()
    })
    $('.flavList .list .listcheck').on('click', function () {
        var check = $(this).attr('data')
        if (check == 0) {
            $(this).attr('data', 1).parent().siblings().find('.listcheck').attr('data', 0)
            $(this).removeClass('check').addClass('check_on').parent().siblings().find('.listcheck').addClass('check').removeClass('check_on');
            $(this).next().addClass('name_on').parent().siblings().find('.name').removeClass('name_on')
        } else {
            $(this).attr('data', 0).parent().siblings().find('.listcheck').attr('data', 1)
            $(this).removeClass('check_on').addClass('check');
            $(this).next().removeClass('name_on')
        }
    })


    //加入购物车
    function addCar() {
               if ($(this).attr("data") == 1) {
                //添加数据到购物车ajax
                //添加之后产生的效果
                $('.addCar').show()
                $('#addC').animate({
                    height: "0"
                }, 200)
                $('html,body').css('overflow', 'auto')
                $('.mask').animate({
                    height: "0",
                }, 200).hide()
            } else {
                return false;
            }
    }
</script>
</body>
</html>
